<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 3px solid #333;
            margin: 50px auto;
            display: flex;
            flex-direction: column
        }

        .box>ul {
            height: 60px;
            display: flex;
        }

        .box>ul>li {
            flex: 1;
            background-color: skyblue;
            color: #fff;
            font-size: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .box>ul>li.active {
            background-color: orange;
        }

        .box>ol {
            flex: 1;
            position: relative;
        }

        .box>ol>li {
            width: 100%;
            height: 100%;
            background-color: purple;
            position: absolute;
            left: 0;
            top: 0;

            font-size: 100px;
            color: #fff;

            display: none;
        }

        .box>ol>li.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 选项 -->
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <!-- 内容盒子 -->
        <ol>
            <li class="active">1对应的内容</li>
            <li>2对应的内容</li>
            <li>3对应的内容</li>
        </ol>
    </div>

    <script>
         // for(var i=0;i<btns.length;i++){
        //     // console.log(i); 0 1 2 
        // }

        // console.log(i);// 3  
        // // i  0  循环
        // // i  1  循环
        // // i  2  循环
        // // i++ i = 3
        // // 参与判断   循环停止  

        // // 循环结束  i 是 3

        //获取元素 

        // 获取所有的选项卡  
        var btns = document.querySelectorAll("ul>li");

        // 获取所有的内容盒子
        var contents = document.querySelectorAll("ol>li");


        // 给每个选项卡绑定点击事件  
        for(var i=0;i<btns.length;i++){
            // 绑定点击事件以前给每个选项卡编个号
            /* 
             <ul>
                <li class="active" data-id="0">1</li>
                <li data-id="1">2</li>
                <li data-id="2">3</li>
            </ul>
            
            */ 
            btns[i].dataset.id = i;

            btns[i].onclick = function(){
                // alert(i) // 3
                // for循环结束 每个选项卡都绑定了点击事件
                // 函数没执行  
                // 也就是函数执行的时候 循环已经是结束了 
                // 每个函数拿到的i是for循环结束的i
                // 所以结果是2 

                // 点击哪个元素  哪个元素就是this 
                // console.log(this.dataset.id);
                // console.log(this.dataset.id);


                for(var j=0;j<btns.length;j++){
                    btns[j].classList.remove('active');
                    contents[j].classList.remove('active');
                }
                // 循环完毕 所有的选项卡 移除高亮
                // 所有的内容区域 隐藏 


                //点击谁 谁高亮 然后 对应的内容盒子显示
                // 在这个之前  让所有的选项卡 移除高亮
                // 让所有的内容区域隐藏  

                btns[this.dataset.id].classList.add('active');
                contents[this.dataset.id].classList.add('active');

            }
        }




        // for


        /* 
        
          {
            i
            {
                3
            },

            {
                3
            }

            {
                3
            }
          }
        
        
        
        forEach
        {
            
            {
                i=0
            },

            {
                i=1
            }

            {
                i=2
            }
          }
        


        
        */
       
    </script>
</body>

</html>